<template>
  <div class="index-page">
    <!-- search -->
    <div class="search-wrapper">
      <input class="search-input" placeholder-class="phcolor" type="text"  placeholder="请输入关键字搜索">
    </div>
    <!-- swiper -->
    <div class="swiper-wrapper">
      <swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="3000" circular="true" duration="500">
        <div v-for="(item,index) in imgUrls" :key="index">
          <swiper-item class="swiper-item">
            <image :src="item" class="slide-image"></image>
          </swiper-item>
        </div>
      </swiper>
    </div>
    <!-- channle -->
    <div class="channel">
      <div @click="categoryList(item.id)" v-for="(item, index) in channels" :key="index">
        <img :src="item.icon_url" alt="">
        <p>{{item.name}}</p>
      </div>
    </div>
    <!-- notice-bar -->
    <van-row class="notice-bar-wrapper">
      <van-col span="21">
        <div class="notice-bar">
          <van-notice-bar
            backgroundColor="#e1e1e1"
            color="#000"
            left-icon="http://pic.90sjimg.com/design/00/12/03/94/58dddb352102a.png!/fw/250/quality/100/unsharp/true/compress/true/canvas/250x250/cvscolor/FFFFFFFF"
            text="冬季滑雪户外拓展特价进行中。。。。5折优惠等你来哟。。。。冬季滑雪户外拓展特价进行中。。。。5折优惠等你来哟。。。。"
          />
        </div>
      </van-col>
      <van-col span="3">
        <div class="more">更多</div>
      </van-col>
    </van-row>
    <!-- gap -->
    <gap></gap>

    <!-- new promote -->

    <div class="promote-wrapper">
      <content-panel titleText="最新活动">
        <div class="content-wrapper">
          <van-row gutter="14">
            <van-col span="8" :key="index" v-for="(item,index) in firstRow">
              <div class="goods-item">
                <goods-card :goodsItem="item"></goods-card>
              </div>
            </van-col>
          </van-row>
          <van-row gutter="14">
            <van-col span="8" :key="index" v-for="(item,index) in secondRow">
              <div class="goods-item">
                <goods-card :goodsItem="item"></goods-card>
              </div>
            </van-col>
          </van-row>
        </div>
      </content-panel>
    </div>

    <!-- gap -->
    <gap></gap>
    <!-- hot recommand -->
    <div class="hot-recommand-wrapper">
      <content-panel titleText="热门推荐">
        <div class="content-wrapper">
          <van-tabs animated :line-width="0" :active="active" @change="onChange">
            <van-tab title="亲子活动">
              <van-card
                v-for="(recdItem,index) in hotRecd"
                :key="index"
                :tag="recdItem.thumbTag"
                :price="recdItem.price"
                :desc="recdItem.desc"
                :title="recdItem.title"
                :thumb="recdItem.thumb"
              >
                <div slot="tags">
                  <van-tag plain color="#59b371" :key="tagIndex" v-for="(tagItem,tagIndex) in recdItem.descTag">{{tagItem}}</van-tag>
                </div>
              </van-card>
            </van-tab>
            <van-tab title="青少年拓展训练">青少年拓展训练</van-tab>
            <van-tab title="冬夏令营">冬夏令营</van-tab>
            <van-tab title="班委会活动">班委会活动</van-tab>
          </van-tabs>
        </div>
      </content-panel>
    </div>
  </div>
</template>

<script>
import ContentPanel from '../../components/content-panel/content-panel'
import GoodsCard from "../../components/goods-card/goods-card"
import Gap from '../../components/gap/gap'
import {get} from '../../utils'

export default {
  data() {
    return {
      // 上部数据
      imgUrls:[],
      channels:[],

      // 最新活动
      firstRow:[],
      secondRow: [],
      active : 0,

      // 热门推荐
      hotRecd:[]
    }
  },

  components: {
    ContentPanel, GoodsCard, Gap
  },

  async mounted() {
    // 加载数据
    const promote = await get('/mock/promote.json')
    this.firstRow = promote.firstRow
    this.secondRow = promote.secondRow

    const indexData = await get('/mock/index-data.json')
    this.imgUrls = indexData.imgUrls
    this.channels = indexData.channels
    indexData.hotRecd.forEach(i => i.price = `${i.price} / 人`)
    this.hotRecd = indexData.hotRecd
  },

  methods: {
    onChange(){

    }
  },

  created() {
    
  }
};
</script>

<style lang="sass">
@import "../../common/style/variable.sass"

.index-page
  .search-wrapper
    height: 80rpx
    background-color: $theme-color
    .search-input
      width: 70%
      height: 70rpx
      padding: 5rpx 10% 5rpx 10%
      margin: 0 5%
      background-color: $input-focus-bg-color
      border-radius: 35rpx
      font-size: 30rpx
      color: white
    .phcolor
      color: white
      text-align: center
  .swiper-wrapper
    width: 90%
    padding: 0 5% 0
    height: 417rpx
    .swiper-container 
      width: 100%
      height: 100%
      .swiper-item 
        width: 100%
        height: 100%
        border-radius: 20rpx
        .slide-image 
          width: 100%
          height: 100%
  .channel 
    display: flex
    padding: 20rpx 0
    background: #ffffff
    margin: 20rpx 0
    div 
      width: 25%
      text-align: center
      img 
        height: 70rpx
        width: 70rpx
        border-radius: 50%
        display: inline-block
      p
        font-size: 30rpx
        font-weight: bold
  .notice-bar-wrapper
    width: 100%
    .notice-bar
      border-radius: 10rpx
    .more
      height: 74rpx
      line-height: 74rpx
      font-size: 30rpx
      text-align: center
      background-color: #e1e1e1
  .promote-wrapper
    .content-wrapper
      height: 560rpx
      .goods-item
            height: 280rpx
  .hot-recommand-wrapper
    .content-wrapper
      height: 720rpx
      .van-tabs
        .van-tabs__nav
          .van-tab
            flex: none
            .van-ellipsis.van-tab__title
              display: inline
              background-color: white
              padding: 4rpx 10rpx
              color: black
              border-radius: 30rpx
            &.van-tab--active
              .van-ellipsis.van-tab__title
                padding: 4rpx 10rpx
                color: white
                background-color: $theme-color
      ._van-tab
        ._van-tag
          .van-tag
            margin: 10rpx 10rpx 10rpx 0
      ._van-card
        .van-card
          width: 95%
          // border: 1rpx solid #e1e1e1
          margin: 20rpx auto
          padding: 20rpx 16rpx 18rpx 20rpx
          box-shadow: 1px 2px 4px 2px #e1e1e1
          .van-card__content
            .van-card__title
              font-size: 30rpx
              font-weight: bold
            .van-card__desc
              line-height: 16px
</style>
